<template>
  <t-modal
    title="模型列表"
    width="1264px"
    :visible="visible"
    @cancel="closeModal()"
    wrapClassName="association-model-container"
    v-bind="footer"
    forceRender
    :zIndex="2000"
  >
    <div class="association-body-container">
      <div class="tree-table-container">
        <div class="tree-header">模型列表</div>
        <div class="tree-body">
          <div class="condition-warp">
            <a-input-search
              v-model="condition.keyWord"
              style="width: 380px;margin-right:16px"
              placeholder="请输入关键字"
              @search="onSearch()"
            />
          </div>
          <div class="tree-warp">
            <vxe-table
              ref="xTable"
              height="99%"
              align="left"
              show-overflow
              show-header-overflow
              border="inner"
              :data="tableData"
              :column-config="{ resizable: true }"
              size="small"
              :loading="loading"
              :row-config="{ keyField: 'uuid' }"
            >
              <vxe-column field="nodeName" title="模型名称"> </vxe-column>
              <vxe-column title="预览" width="120">
                <template #default="{ row }">
                  <div class="files-icon">
                    <a-tooltip placement="top">
                      <template slot="title"> 预览</template>
                      <a-icon
                        type="eye"
                        class="preview-btn"
                        @click="handleView(row)"
                      />
                    </a-tooltip>
                  </div>
                </template>
              </vxe-column>
              <vxe-column title="关联" width="120">
                <template #default="{ row }">
                  <a-radio
                    :checked="row.select"
                    @change="changeRadio(row)"
                  ></a-radio>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="association-footer-container">
      <a-button type="default" @click="closeModal()">取消</a-button>
      <a-button type="primary" :loading="submitLoading" @click="handleOk()">
        关联模型
      </a-button>
    </div>
  </t-modal>
</template>

<script>
//关联模型
import { addAttributeByKey, flatTreeData } from "@/utils/util.js";
import { Icon } from "ant-design-vue";
import iconfrontjs from "@/assets/IconFont/iconfont.js";
import cloneDeep from "lodash.clonedeep";
const iconFrontUrl = iconfrontjs;
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFrontUrl,
});
import { getModalTreeById, dataSetFileTreeNodes } from "@/api/bim";
import { axios } from "@/utils/request";
export default {
  name: "associationModel",
  inject: ["moduleSource"],
  components: {
    IconFont,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => {},
    },
    footer: {
      type: Object,
      default() {
        return {
          footer: null,
        };
      },
    },
  },
  data() {
    return {
      //列表
      tableData: [],
      loading: false,
      //提交
      submitLoading: false,
      //搜索
      condition: {
        //关键字
        keyWord: "",
      },
      cloneData: [],
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    //关联模型
    handleOk() {
      let arrayList = this.tableData.filter((item) => item.select);
      if (arrayList.length == 0) {
        this.$message.warning("请选择您要关联的模型！");
        return;
      }
      this.submitLoading = true;
      let record = arrayList?.[0] ?? {};
      let { bhDataSetId } = record;
      let { uuid } = this.row;
      axios
        .post(
          `/probusiness/bimCadFile/updateData`,
          {
            uuid,
            dataSetId: bhDataSetId,
            componentId: "",
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          let { statusCode, message } = res;
          if (statusCode == 200 && message == "success") {
            this.$message.success("模型关联成功！");
            this.closeModal();
            this.$emit("change");
          } else {
            this.$message.error(message ?? "关联失败，请稍后重试！");
          }
        })
        .catch((_) => {
          this.$message.error("关联失败，请稍后重试！");
        })
        .finally((_) => {
          this.submitLoading = false;
        });
    },

    //请求属性数据
    getData() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/probusiness/bimCadClassify/getModelTreeByProCode?type=${this.moduleSource()}`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let source = res?.data ?? [];
            this.tableData = source;
            this.tableData.forEach((item) => {
              if (this.row.dataSetId == item.bhDataSetId) {
                this.$set(item, "select", true);
              } else {
                this.$set(item, "select", false);
              }
            });
            this.cloneData = cloneDeep(this.tableData ?? []);
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.cloneData = [];
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //单选
    changeRadio(row) {
      let { uuid } = row;
      this.tableData.forEach((item) => {
        if (uuid == item.uuid) {
          item.select = true;
        } else {
          item.select = false;
        }
      });
    },

    //预览
    handleView(row) {
      let { bhDataSetId, fileName } = row;
      let domain = location.origin;
      window.open(
        `${domain}/#/blackHole/viewDataSetSingleSimple?dataSetId=${bhDataSetId}&name=${fileName}`
      );
    },

    //搜索
    onSearch() {
      let { cloneData } = this;
      let { keyWord } = this.condition;
      let filteData = cloneData.filter((item) =>
        item.nodeName.includes(keyWord)
      );
      this.tableData = filteData;
    },

    closeModal() {
      this.cloneData = [];
      this.tableData = [];
      this.condition.keyWord = "";
      this.submitLoading = false;
      this.loading = false;
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style>
.ant-message {
  z-index: 9999;
}
</style>
<style lang="less" scoped>
/deep/.association-model-container {
  .ant-modal-body {
    padding: 0 !important;
  }
  .association-body-container {
    padding: 14px;
    box-sizing: border-box;
    height: 686px;
    display: flex;
    flex-direction: column;
    .tree-table-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      border: 1px solid #d9d9d9;
      border-radius: 6px;
      overflow: hidden;
      .tree-header {
        background: #d9d9d9;
        height: 40px;
        flex-shrink: 0;
        color: #333;
        font-size: 14px;
        padding: 0 16px;
        display: flex;
        align-items: center;
      }
      .tree-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0 16px 16px 16px;
        box-sizing: border-box;
        .condition-warp {
          flex-shrink: 0;
          height: 64px;
          display: flex;
          align-items: center;
        }
        .tree-warp {
          flex: 1;
          .files-icon {
            .anticon {
              cursor: pointer;
              font-size: 18px;
              color: #1677ff;
            }
          }
        }
      }
    }
  }
  .association-footer-container {
    padding: 10px 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #e8e8e8;
    border-radius: 0 0 4px 4px;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
}
</style>
